<template>
  <div :class="boxClass" @click="toggleAnimation">
    Click me!
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { css, keyframes } from '@emotion/css';

const isAnimating = ref(false);

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
`;

const pulse = keyframes`
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(66, 185, 131, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(66, 185, 131, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(66, 185, 131, 0);
  }
`;

const boxClass = computed(() => {
  return css`
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: var(--transition);
    animation: ${isAnimating.value ? css`${bounce} 1s ease infinite` : 'none'};

    &:hover {
      animation: ${pulse} 1.5s infinite;
    }
  `;
});

const toggleAnimation = () => {
  isAnimating.value = !isAnimating.value;
};
</script>
